<template>
  <div>
    <el-card>
      <div slot="header"><span style="font-size:20px;">角色管理</span></div>
      <div>
        <el-table border :data="authList" style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
          <el-table-column align="center" prop="roleName" label="角色名" width="200"></el-table-column>
          <el-table-column align="center" prop="roles" label="权限" width="width">
            <template slot-scope="{row}">
              <el-tag type="primary" v-for="(auth,index) in row.roles.split(',')" :key="index">{{auth}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="{row}">
              <el-button style="margin-right:10px;" type="warning" size="small" @click="updateRoleBtn(row)">编辑</el-button>
              <el-popconfirm  :title="`这是一段内容确定${row.roleName}吗？`" @confirm="deleteRoleBtn(row)">
                <el-button slot="reference" type="danger" size="small">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog
      title="权限管理"
      :visible.sync="authDialog"
      width="width">
      <div>
        <el-form ref="form" :model="authForm" label-width="80px">
          <el-form-item label="角色">
            <el-input style="width:50%" :disabled="true" v-model="authForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="权限管理">
          <el-checkbox-group v-model="authForm.roles">
            <el-checkbox label="账户管理" name="roles"></el-checkbox>
            <el-checkbox label="角色管理" name="roles"></el-checkbox>
            <el-checkbox label="学生信息管理" name="roles"></el-checkbox>
            <el-checkbox label="学生成绩管理" name="roles"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="authDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateAuth">确 定</el-button>
        
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "AdminRole",
  data() {
    return {
      // 权限信息
      roleInfo: {},
      // 权限列表
      authList: [],
      // 控制权限弹出层是否显示
      authDialog:false,
      // 编辑权限
      authForm:{
        roleName:'',
        roles:[]
      }

    };
  },
  mounted() {
    this.getRoleInfo()
  },
  methods: {
    // 获取角色信息
    async getRoleInfo(){
      try {
        let result = await this.$store.dispatch('roleAdmin/getFindRole');
        if(result.code === 200) this.authList = result.data
      } catch (error) {
        this.$message.error(`*_*,${error.message}`)
      }
    },
    // 更新权限
    updateRoleBtn(row){
      this.authDialog = true
      let newRow = {...row}
      newRow.roles = row.roles.split(',')
      this.authForm = newRow
    },
    // 更新权限
    async updateAuth(){
      this.authDialog = false
      try {
        let result = await this.$store.dispatch('roleAdmin/getUpdateAuth', this.authForm);
        if(result.code === 200){
          this.$message.success('^_^,更新成功')
          this.getRoleInfo()
        }
      } catch (error) {
        this.$message.error(`*_*,${error.message}`)
      }
    },
    // 删除权限
    async deleteRoleBtn(row){
      try {
        let result = await this.$store.dispatch('roleAdmin/getDeleteRole', row.roleId);
        if(result.code === 200){
          this.$message.success('^_^,删除成功')
          this.getRoleInfo()
        }
      } catch (error) {
        this.$message.error(`*_*,${error.message}`)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.el-tag {
  margin-right: 10px;
}
</style>